<script>
import EChatAddPopover from "@/components/common/EChatAddPopover.vue";

export default {
  name: "EChatHeader",
  components: {EChatAddPopover},
  data() {
    return {
      clickType: '', // add search
      isShowSearchInput: false,
      isShowAddPop: false,
      searchValue: ""
    }
  },
  computed: {
    searchText: {
      get() {
        return this.$store.state.commonData.chatsSearchText
      },
      set(value) {
        this.$store.commit("commonData/setChatsSearchText", value)
      }
    },
    curRoute() {
      return this.$route.path
    }
  },
  methods: {
    handleSearch() {
      this.$data.clickType = 'search'
      this.$data.isShowSearchInput = true
      // this.$emit('on-search')
    },
    handleClose() {
      this.$store.commit("commonData/setChatsSearchText", '')
      this.handleSearch()
      this.$data.isShowSearchInput = false
      this.$data.clickType = ''
    },
    handleClickBackHome() {
      this.$router.push('/home/chat')
      // window.location.reload()
    }
  },
  mounted() {
    console.log('Current route:', this.curRoute);
  }
}
</script>

<template>
  <div class="chat-header">
    <div class="header-mask"></div>
    <div class="header-content-add-friend" v-if="$route.path === '/add-friend'">
      <div class="add-friend-back-btn header-light-btn flex-center" @click="handleClickBackHome">
        <i class="el-icon el-icon-back"></i>
      </div>
      <div class="add-friend-title">Add Friend</div>
    </div>
    <div class="header-content-add-friend" v-else-if="$route.path === '/create-group'">
      <div class="add-friend-back-btn header-light-btn flex-center" @click="handleClickBackHome">
        <i class="el-icon el-icon-back"></i>
      </div>
      <div class="add-friend-title">Add Friend</div>
    </div>
    <div class="header-content" v-else>
      <div class="title" v-if="!isShowSearchInput">
        <div class="title-icon"></div>
        <div class="title-text">E-Chat</div>
      </div>
      <div class="title title-search" v-else>
        <van-search
            v-model="searchText"
            shape="round"
            background="transparent"
            placeholder="Search"
        />
      </div>
      <div class="header-btn">
        <div class="search-btn" @click="handleSearch" v-if="!isShowSearchInput"><i class="el-icon el-icon-search"></i>
        </div>
        <div class="close-btn header-light-btn flex-center" @click="handleClose" v-else><i
            class="el-icon el-icon-close"></i></div>
        <EChatAddPopover v-if="!isShowSearchInput"></EChatAddPopover>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat-header {
  width: 100%;
  height: 110px; // 13vh
  //background: var(--chat-theme-color);
  background-image: var(--chat-header-bg);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  //transform: translate(0, 100px);
  z-index: 999;

  .header-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 0 50px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 81.5%, rgba(255, 255, 255, 0.2) 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    pointer-events: none;
  }

  .header-content-add-friend {
    margin: 51px 14px 16px 14px;
    height: 42px;
    display: flex;
    align-items: center;
    .add-friend-back-btn {
      z-index: 999;
    }
    .add-friend-back-btn, .add-friend-title {
      color: var(--chat-header-title-color) !important;
    }
    .add-friend-back-btn .el-icon {
      //color: var(--chat-header-title-color) !important;
    }
    .add-friend-title {
      flex: 1;
      transform: translate(-21px,0);
      z-index: 0;
      text-align: center;
      font-size: 22px;
      font-weight: 400;
    }
  }

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 51px 14px 16px 14px;
    height: 43px;

    .title-search {
      flex: 1;

      .van-search {
        width: 100%;
        padding: 0;
      }
    }

    .title {
      display: flex;
      align-items: center;

      .title-icon {
        width: 32px;
        height: 32px;
        background-image: var(--chat-header-logo);
        background-size: 100% 100%;
      }

      .title-text {
        margin-left: 10px;
        color: var(--chat-header-title-color);
        font-weight: bold;
        font-style: italic;
      }
    }

    .header-btn {
      display: flex;
      align-items: center;

      .search-btn {
        width: 22px;
        height: 22px;
      }
      .el-icon, .el-icon.search-btn, .el-icon.close-btn {
        color: var(--chat-header-icon-color) !important;
        font-size: 22px;
      }

      .add-btn {
        margin-left: 20px;
      }

      .close-btn {
        margin-left: 20px;
      }
    }
  }
}

</style>